<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>登录-简游网</title>
    <link rel="shortcut icon" href="images/logo简游.png" />
    <link rel="stylesheet" href="css/logins.css" />
  </head>

  <body>
    <main>
      <div class="form">
        <div class="form__cover"></div>
        <div class="form__loader">
          <div class="spinner active">
            <svg class="spinner__circular" viewBox="25 25 50 50">
              <circle
                class="spinner__path"
                cx="50"
                cy="50"
                r="20"
                fill="none"
                stroke-width="4"
                stroke-miterlimit="10"
              ></circle>
            </svg>
          </div>
        </div>
        <div class="form__content">
          <h1>用户登录</h1>
          <div class="styled-input">
            <input type="text" class="styled-input__input" name="nickname" />
            <div class="styled-input__placeholder">
              <span class="styled-input__placeholder-text">用户名</span>
            </div>
            <div class="styled-input__circle"></div>
          </div>
          <div class="styled-input">
            <input type="text" class="styled-input__input" />
            <div class="styled-input__placeholder">
              <span class="styled-input__placeholder-text">密码</span>
            </div>
            <div class="styled-input__circle"></div>
          </div>
          <button type="button" class="styled-button button2">
            <span class="styled-button__real-text-holder">
              <span class="styled-button__real-text">Submit</span>
              <span class="styled-button__moving-block face">
                <span class="styled-button__text-holder">
                  <span class="styled-button__text">登录</span>
                </span> </span
              ><span class="styled-button__moving-block back">
                <span class="styled-button__text-holder">
                  <span class="styled-button__text">Submit</span>
                </span>
              </span>
            </span>
          </button>
        </div>
      </div>
    </main>
    <script src="js/logins.js"></script>
    <script>
      const loginButtom = document.querySelectorAll(".button2");
      loginButtom.forEach((loginButtoms) => {
        loginButtoms.addEventListener("click", () => {
          alert("登录成功");
        });
      });
    </script>
  </body>
</html>
